<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border"
      style="max-width: 300px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          <div
            class="ant-pro-core-label-tip"
          >
            <div
              class="ant-pro-core-label-tip-title"
            >
              Default Size
            </div>
            <span
              aria-describedby="test-id"
              class="ant-pro-core-label-tip-icon"
            >
              <span
                aria-label="info-circle"
                class="anticon anticon-info-circle"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="info-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  />
                  <path
                    d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
        <div
          class="ant-pro-card-extra"
        >
          <div
            class="ant-pro-form-group"
          >
            <div>
              <div
                class="ant-space ant-space-horizontal ant-space-align-start ant-pro-form-group-container "
                style="column-gap: 32px; row-gap: 0;"
              >
                <div
                  class="ant-space-item"
                >
                  <button
                    aria-checked="false"
                    class="ant-switch"
                    id="Enable"
                    role="switch"
                    type="button"
                  >
                    <div
                      class="ant-switch-handle"
                    />
                    <span
                      class="ant-switch-inner"
                    >
                      <span
                        class="ant-switch-inner-checked"
                      >
                        Enabled
                      </span>
                      <span
                        class="ant-switch-inner-unchecked"
                      >
                        Disabled
                      </span>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
      </div>
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-box-shadow"
      style="max-width: 300px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          <div
            class="ant-pro-core-label-tip"
          >
            <div
              class="ant-pro-core-label-tip-title"
            >
              Card with Shadow
            </div>
            <span
              aria-describedby="test-id"
              class="ant-pro-core-label-tip-icon"
            >
              <span
                aria-label="info-circle"
                class="anticon anticon-info-circle"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="info-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  />
                  <path
                    d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
        <div
          class="ant-pro-card-extra"
        >
          extra
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
      </div>
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-size-small"
      style="max-width: 300px; margin-block-start: 24px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          <div
            class="ant-pro-core-label-tip"
          >
            <div
              class="ant-pro-core-label-tip-title"
            >
              Small Size Card
            </div>
            <span
              aria-describedby="test-id"
              class="ant-pro-core-label-tip-icon"
            >
              <span
                aria-label="info-circle"
                class="anticon anticon-info-circle"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="info-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  />
                  <path
                    d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
        <div
          class="ant-pro-card-extra"
        >
          extra
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
        <div>
          Card content
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            variant
          </strong>
          : 卡片变体样式，可选值：'outlined' | 'filled' | 'elevated'
        </li>
        <li>
          <strong>
            extra
          </strong>
          : 卡片右上角操作区域，可以是字符串或 React 节点
        </li>
        <li>
          <strong>
            tooltip
          </strong>
          : 卡片的提示信息
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片的样式对象
        </li>
        <li>
          <strong>
            boxShadow
          </strong>
          : 是否显示阴影效果，布尔值
        </li>
        <li>
          <strong>
            size
          </strong>
          : 卡片尺寸，可选值：'default' | 'small'
        </li>
        <li>
          <strong>
            children
          </strong>
          : 卡片内容区域
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>